<section id="jwk-work-add-edit" class="ml-24 mr-24 pb-20">
	<hl-page-header title="办公租赁"></hl-page-header>
	<div class="mt-15">
		<div class="clearfix">
			<div class="pull-left line-height-34 color-gray">主要信息</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">房源信息：</div>
			<div class="dy-fx-9">
				<input type="text" class="form-control" style="width: 60%;" v-model="addItem.name">
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">房源头图：</div>
			<div class="dy-fx-9 dy-flex img-container" style="flex-wrap: wrap">
				<div v-for="(item,index) in addItem.main_pic_url" class="imgbox">
					<img :src="item" alt="">
					<div class="delIcon" @click="delPic(index,'F')">删除</div>
				</div>
				<div v-if="!addItem.main_pic_url.length" class="icon-Gm-add relative text-center update-img cursor" @click="picUp('F')">
					<span class="font-12 absolute">请上传一张头图</span>
				</div>
			</div>
		</div>
		<div class="dy-flex mt-10">
			<div class="dy-fx-1 line-height-34">内页轮播：</div>
			<div class="dy-fx-9 dy-flex img-container" style="flex-wrap: wrap">
				<div v-for="(item,index) in addItem.banner_pic_urls" class="imgbox">
					<img :src="item" alt="">
					<div class="delIcon" @click="delPic(index,'N')">删除</div>
				</div>
				<div v-if="addItem.banner_pic_urls.length < 5" class="icon-Gm-add relative text-center update-img cursor" @click="picUp('N')">
					<span class="font-12 absolute" style="bottom: 5px;">请至少上传一张内页，<br />不得超过五张</span>
				</div>
			</div>
		</div>
	</div>

	<div class="mt-15 pt-15 border-t">
		<div class="clearfix">
			<div class="pull-left line-height-34 color-gray">基础信息</div>
		</div>
		<div class="dy-flex line-height-34 mt-10">
			<div style="width:100px;">面积：</div>
			<div style="width:240px;">
				<input type="number" class="form-control inline" style="width: 155px;" v-model="addItem.acreage">
				<span>m²</span>
			</div>
			<div style="width:130px;"></div>
			<div style="width:70px;">层高：</div>
			<div style="width:240px;">
				<input type="number" class="form-control inline" style="width: 155px;" v-model="addItem.floor_height"> m
			</div>
		</div>
		<div class="dy-flex line-height-34 mt-10">
			<div style="width:100px;">户型：</div>
			<div style="width:240px;">
				<hl-select :data="model" type="primary" width="155" v-model="addItem.apartment_layout_code"
					@on-change="selectModel"></hl-select>
			</div>
			<div style="width:130px;"></div>
			<div style="width:70px;">装修：</div>
			<div style="width:240px;">
				<hl-select :data="decorate" type="primary" width="155" v-model="addItem.apartment_decoration_code"
					@on-change="selectDecorate"></hl-select>
			</div>
		</div>
		<div class="dy-flex line-height-34 mt-10">
			<div style="width:100px;">联系电话：</div>
			<div style="width:240px;">
				<input type="number" class="form-control inline" style="width: 155px;" v-model="addItem.contact_phone_num">
			</div>
			<div style="width:130px;"></div>
			<div style="width:70px;">赏金：</div>
			<div style="width:240px;">
				<input type="number" class="form-control inline" style="width: 155px;" v-model="addItem.rewards">
				<span>元</span>
			</div>
		</div>
	</div>

	<div class="mt-15 pt-15 border-t">
		<div class="clearfix">
			<div class="pull-left line-height-34 color-gray">费用信息</div>
		</div>
		<div class="dy-flex line-height-34 mt-10">
			<div style="width:100px;">租金：</div>
			<div style="width:240px;" class="dy-flex">
				<input type="number" class="form-control inline mr-10" style="width: 155px;" v-model="addItem.rent_price">
				<hl-select :data="rentList" type="primary" width="96" v-model="addItem.rent_price_units_code"></hl-select>
			</div>
			<div style="width:130px;"></div>
			<div style="width:70px;">物业费：</div>
			<div style="width:240px;">
				<input type="number" class="form-control inline" style="width: 155px;" v-model="addItem.property_fee">
				<span>元/㎡/月</span>
			</div>
		</div>
	</div>

	<div class="mt-15 pt-15 border-t">
		<div class="clearfix">
			<div class="pull-left line-height-34 color-gray">园区信息</div>
		</div>
		<div class="clearfix mt-10 line-height-34 mb-10">
			<div class="pull-left mr-10">园区：</div>
			<div class="pull-left">
				<hl-autoComplete :data="parkList" width="155" :fetch-suggestions="getParkData" v-model="parkInfo.name"
					@on-change="selectParkId" placeholder="请输入"></hl-autoComplete>
			</div>
		</div>
		<div class="clearfix">
			<div class="pull-left" style="width: 50%;height: 300px;">
				<!-- 地图 -->
				<div id="mapGaode" style="width: 480px;height: 296px;"></div>
			</div>
			<div class="pull-left line-height-34" style="width: 48%;margin-left: 2%;height: 300px;">
				<div class="color-999">详细地址：</div>
				<div class="pb-20">{{parkInfo.city + parkInfo.district + parkInfo.address}}</div>
				<div class="color-999">交通：</div>
				<div class="pb-20">{{parkInfo.trafficInfo}}</div>
				<div class="color-999">停车费：</div>
				<div>{{parkInfo.parkingPrice}} 元/月</div>
			</div>
		</div>
		<div>
			<div class="mt-15">配套设施</div>
			<div class="dy-flex mt-10">
				<ul class="clearfix mathing-config">
					<li v-for="item in parkInfo.parkFacilityList" class="active">{{item.facility}}</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="mt-15 pt-15 border-t">
		<div class="clearfix">
			<div class="pull-left line-height-34 color-gray">详细描述</div>
		</div>
		<div class="mt-10">
			<div id="editor" style="width: 100%;"></div>
		</div>
	</div>
	<div class="mt-10"></div>
	<hl-button type="primary" @on-click="saveSumit">保存</hl-button>
	<div class="picButton"></div>
</section>

<script src="scripts/libs/wangEditor.min.js" charset="utf-8"></script>
<script src="modules/jwk/scripts/jwk_work_add_edit.js" charset="utf-8"></script>

<style type="text/css">
	.update-img {
		width: 120px;
		height: 120px;
		line-height: 120px;
		font-size: 32px;
		background: #F1F1F1;
		color: #999;
	}

	.update-img span {
		width: 100%;
		bottom: 20px;
		line-height: 18px;
		left: 0;
		color: #ccc;
	}

	.img-container>div {
		margin-right: 10px;
		position: relative;
	}

	.delIcon {
		position: absolute;
		bottom: 0;
		width: 120px;
		height: 34px;
		background: rgba(0, 0, 0, 1);
		opacity: 0.5;
		color: #fff;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.imgbox {
		width: 120px;
		height: 120px;
	}

	.imgbox img {
		width: 100%;
		height: 100%;
	}

	.amap-icon img {
		width: 25px;
		height: 34px;
	}

	.amap-logo,
	.amap-copyright {
		display: none !important;
	}

	.mathing-config {
		display: flex;
		flex-wrap: wrap;
		padding: 0 80px;
	}

	.mathing-config li {
		width: 110px;
		height: 36px;
		line-height: 36px;
		box-sizing: border-box;
		border: 1px solid #666;
		margin-right: 12px;
		margin-bottom: 10px;
		cursor: pointer;
		margin: 0 25px 24px 25px;
		text-align: center;
	}

	.mathing-config li.active {
		background: #565E99;
		border-color: #565E99;
		color: #fff;
	}
	/*添加css样式*/
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
				-webkit-appearance: none;
		}

		input[type="number"] {
				-moz-appearance: textfield;
		}
</style>
